import * as THREE from 'three';
import gsap from 'gsap';

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scence = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
    color: '#ff0000',
    // wireframe:true
})
const mesh = new THREE.Mesh(geometry, material);
scence.add(mesh)


// Sizes
const Sizes = {
    width: 800,
    height: 600
}


// Camera 
// 透视相机就是  物体离得近变大，离远变小
const camera = new THREE.PerspectiveCamera(75, Sizes.width / Sizes.height)
// 相机的初始位置在（0，0，0）中心点，看不见物体，移动相机
camera.position.z = 3
scence.add(camera)



// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas,
})
renderer.setSize(Sizes.width, Sizes.height);



// Time
let time = Date.now();
// Animation
const tick1 = () => {
    // Time
    const currentTime = Date.now()
    const deltaTime = currentTime - time;
    time = currentTime;
    console.log(deltaTime)  //帧数越高的设备   deltaTime越小

    // Update Objects
    mesh.rotation.y += 0.002 * deltaTime     //保证物体在不同的帧数下 旋转的速度一样

    // Render
    renderer.render(scence, camera);
    window.requestAnimationFrame(tick)
}

// gsap
// gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })
// gsap.to(mesh.position, { duration: 1, delay: 2, x: 0 })

// clock解决不同设备的帧数问题
const clock = new THREE.Clock()
const tick = () => {

    // clock
    const elapsedTime = clock.getElapsedTime();
    // Update Objects
    mesh.rotation.y = elapsedTime * Math.PI * 2      // 1s 转一圈

    // Render
    renderer.render(scence, camera);
    window.requestAnimationFrame(tick);
}


tick()